<template>
  <div class="container">
    <div id="mychart"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-liquidfill";

let mychart = ref<any>(); // 图表
let lastday = ref<number>(0);
let lastdayPercent = ref<number>(0);
onMounted(() => {
  getDate();
  init();
});

const getDate = () => {
  const allDays = getAllDays(new Date().getFullYear());
  const leftDays = getLeftDays();
  lastday.value = leftDays;
  lastdayPercent.value = Math.floor((leftDays / allDays) * 100) / 100;
};
const getAllDays = (year: number) => {
  let leapYear = false,
    sum_day = 0,
    month_arr = [4, 6, 9, 11];
  if (year % 100 === 0) {
    // 年份是整百
    leapYear = year % 400 === 0;
  } else {
    leapYear = year % 4 === 0;
  }
  // 下面计算每个月的天数
  for (let i = 1; i < 13; i++) {
    if (i === 2) {
      sum_day += leapYear ? 29 : 28;
    } else if (month_arr.includes(i)) {
      sum_day += 30;
    } else {
      sum_day += 31;
    }
  }
  return sum_day;
};
const getLeftDays = () => {
  // 今天的标准时间
  let today = new Date();
  // 本年最后标准时间
  let endYear = new Date(today.getFullYear(), 11, 31, 23, 59, 59);
  // 一天的毫秒数
  let msPerDay = 24 * 60 * 60 * 1000;
  // 计算剩余毫秒除以一天的毫秒数，就是天数
  return Math.round((endYear.getTime() - today.getTime()) / msPerDay);
};
const init = () => {
  mychart.value = echarts.init(document.getElementById("mychart"));
  mychart.value.setOption({
    title: {
      text: `2023剩余${lastday.value}天`,
      textStyle: {
        color: "#000",
        fontWeight: "800",
        fontSize: `25`
      }
    },
    backgroundColor: "rgba(180,200,200,0.2)",
    series: [
      {
        type: "liquidFill",
        data: [1 - lastdayPercent.value],
        radius: "60%",
        outline: {
          show: false
        },
        backgroundStyle: {
          borderColor: "#156ACF",
          borderWidth: 1,
          shadowColor: "rgba(0, 0, 0, 0.4)",
          shadowBlur: 25
        },
        shape:
          "path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z",
        label: {
          position: ["40%", "50%"],
          formatter: function () {
            return `${(1 - lastdayPercent.value) * 100}%`;
          },
          fontSize: 20,
          color: "#D94854"
        }
      }
    ]
  });
};
</script>

<style scoped lang="scss">
.container {
  width: 400px;
  height: 400px;
  border: 1px solid blue;
}
#mychart {
  width: 100%;
  height: 100%;
}
</style>
